<!-- views/Icon.vue -->
<template>
  <div class="hello">
    <div class="user_div">
      <div class="user">
        <img src="@/assets/userr.png" alt="" />
        <span>用户</span>
        <h1>{{ this.users.item }}人</h1>
      </div>
      <div class="user">
        <img src="@/assets/line-ancient_pavilion.png" alt="" />
        <span>建筑</span>
        <h1>{{ this.jianzhu.item }}条</h1>

      </div>
      <div class="user">
        <img src="@/assets/wenwan.png" alt="" />
        <span>文物</span>
        <h1>{{ this.shangwu.item }}条</h1>
      </div>
      <div class="user">
        <img src="@/assets/444.png" alt="" />
        <span>总收入</span>
        <h1>￥{{ this.money}}</h1>
      </div>
    </div>

    <div
      ref="main"
      class="main" style="width: 500px; height: 500px;"
    ></div>
   
    
    <div
      ref="main1"
      class="main1" style="width: 700px; height: 500px;"
    ></div>

    <h1 class="title">
      赏文物分组
      </h1>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      shan: [],
      users: [],
      jianzhu: [],
      shangwu: [],  
      money:[],
      shangwugrou:[],
    };
  },
  methods: {},

  mounted() {
    //请求数据
    this.axios.get("/architecture/architectureshan").then((res) => {
      this.shan = res.data.data;
      //扇形图
      var myChart = echarts.init(this.$refs.main);
      // 绘制图表
      myChart.setOption({
        title: {
          text: "赏建筑",
          subtext: "Appreciation of Architecture",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "类型建筑数量",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.shan[0].item, name: this.shan[0].classification },
              { value: this.shan[1].item, name: this.shan[1].classification },
              { value: this.shan[2].item, name: this.shan[2].classification },
              { value: this.shan[3].item, name: this.shan[3].classification },
              { value: this.shan[4].item, name: this.shan[4].classification },
              { value: this.shan[5].item, name: this.shan[5].classification },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      //扇形图结束
    });
    //总用户
    this.axios.get("/user/item").then((res) => {
      this.users = res.data.data[0];
    });
    //总建筑
    this.axios.get("/architecture/architectureshanitem").then((res) => {
      this.jianzhu = res.data.data[0];
    });
    //赏物
    this.axios.get("/appreciation/appreciationitem").then((res) => {
      this.shangwu = res.data.data[0];
    });
    //赏物grou 分类柱状图
    this.axios.get("/appreciation/appreciationgroup").then((res) => {
      this.shangwugrou = res.data.data;
      console.log(this.shangwugrou);

      //柱状图
    var myChart = echarts.init(this.$refs.main1);
    myChart.setOption({
      xAxis: {
        type: "category",
        data: [this.shangwugrou[0].years, this.shangwugrou[1].years, this.shangwugrou[2].years, this.shangwugrou[3].years, this.shangwugrou[4].years, this.shangwugrou[5].years, this.shangwugrou[6].years, this.shangwugrou[7].years],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [this.shangwugrou[0].item, this.shangwugrou[1].item, this.shangwugrou[2].item,this.shangwugrou[3].item, this.shangwugrou[4].item, this.shangwugrou[5].item, this.shangwugrou[6].item, this.shangwugrou[7].item ],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
        },
      ],
    });



    });
    //总收入
    this.axios.get("/architecture/money").then((res) => {
      this.money= res.data.data
    });
    

    
  },
};
</script>


<style  scoped>

.hello{
  background-color: #f7fcf2;
}
.title{
  font-size: 30px;
  font-style:oblique;
  position: absolute;
  top: 32%;
  right: 24%;
}
.main{
  display: inline-block;
  margin-top:100px;
  margin-left:100px;
}
.main1{
  display: inline-block;
  margin-bottom: 50px;
  margin-top:100px;
  margin-left:300px;
}
.user_div {
  width: 100%;
  height: 150px;
  margin-bottom: 0px;
}
.user {
  width: 300px;
  height: 150px;
  border-radius: 10px;
  background-color: rgba(103, 194, 58, 0.5);
  border: 1px solid #000;
  margin: 0 50px;
  float: left;
  padding: 0;
  background-image: url(../assets/111.jpg);
  background-size: 400px;
}
.user:nth-child(2) {
  background-color: #e6a23c;
 
   background-image: url(../assets/222.jpg);
   background-size: 400px;
}
.user:nth-child(3) {
  background-color: #f56c6c;
  
   background-image: url(../assets/333.jpg);
   background-size: 400px;
}
.user:nth-child(4) {
  background-color: #f56c6c;
   background-image: url(../assets/555.jpg);
   background-size: 400px;
}
.user img {
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 0;
  vertical-align: top;
  margin-top: 15px;
  margin-left: 15px;
}
.user h1 {
  display: inline-block;
  line-height: 150px;
  font-size: 44px;
  margin-left: 35px;
}
</style>
